<template>
	<div class="login_moudel">
		<login-title></login-title>
		<section class="login" @keyup.enter="goLogin">
			<section class="from">
				<div class="titleText">
					<img class="img1" src="../assets/img/login-loading.png" />
					<img class="img2" src="../assets/img/login-loading.png" />
					<img class="img3" src="../assets/img/login-loading.png" />
					<span>账户登录</span>
					<img class="img3" src="../assets/img/login-loading.png" />
					<img class="img2" src="../assets/img/login-loading.png" />
					<img class="img1" src="../assets/img/login-loading.png" />
				</div>
				<el-input class="name" placeholder="用户名" v-model.trim="login.name">

				</el-input>
				<el-input class="pass" placeholder="密码" type="password" v-model="login.password">

				</el-input>
				<p class="tips" v-show="errorMsg">{{errorMsgInfo}}</p>
				<div class="login-group">
					<template>
						<el-checkbox v-model="checked">记住密码</el-checkbox>
					</template>
					<router-link style="color: #328EF9;text-decoration: none;" class="resetPassword" to="/passReset">忘记密码
					</router-link>
				</div>
				<el-button style="width: 100%;" type="primary" @click="goLogin">登录</el-button>
			</section>
		</section>
	</div>
</template>
<script>
import loginTitle from './view/logoDiv'
import {login,sss} from '../api/getData'
import $ajax from '../api/config.js'
let Base64 = require('js-base64').Base64;

export default {
	name: 'login',
	data: function() {
		return {
			login: {
				name: '',
				password: ''
			},
			tokenValue: '',
			latticeid: '',
			organid: '',
			personId: '',
			isFirst: true,
			checked: false,
			errorMsg: false,
			errorMsgInfo:''
		}
	},
	components: {
		loginTitle
	},
	created: function() {
		window.sessionStorage.clear()
	}, // 创建时
	beforeMount: function() {}, // 挂载之前
	mounted: function() {
		this.getCookie();
	}, // 挂载之后
	beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
	updated: function() {}, // 数据更新后,渲染后调用(禁止)
	beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
	destroyed: function() {}, // 实例销毁后调用
	methods: {
		//设置cookie
		setCookie(c_name, c_pwd, exdays) {
			var exdate = new Date(); //获取时间
			exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
			//字符串拼接cookie
			window.document.cookie = "name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
			window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
		},
		//读取cookie
		getCookie: function() {
			if (document.cookie.length > 0) {
				var arr = document.cookie.split('; ');
				for (var i = 0; i < arr.length; i++) {
					var arr2 = arr[i].split('='); //再次切割
					//判断查找相对应的值
					if (arr2[0] == 'name') {
						 // console.log(Base64.decode(arr2[1]),"读取缓存账户")
						this.login.name = Base64.decode(arr2[1]) //保存到保存数据的地方
					} else if (arr2[0] == 'password') {
						// console.log(Base64.decode(arr2[1]),"读取缓存密码")
						this.login.password = Base64.decode(arr2[1])
					}
				}
				this.checked = true;
			}
		},
		//清除cookie
		clearCookie: function() {
			this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
		},
		goLogin() {
			login({
				'account': this.login.name,
				'password': this.login.password
			}).then((data) => {
				var data = data.data
				console.log('--data--', data)
				/* console.log(Base64.encode(this.login.password),"base64加密",this.login.password)
				let str64 = Base64.encode(this.login.password)
				console.log(Base64.decode(str64),"base64解密",this.login.password) */
				//登录成功
				if (data.code === 0) {
					this.errorMsg = false
					//判断复选框是否被勾选 勾选则调用配置cookie方法
					if (this.checked == true) {
						//传入账号名，密码，和保存天数3个参数
						this.setCookie(Base64.encode(this.login.name), Base64.encode(this.login.password), 7);
					} else {
						console.log("清空Cookie");
						//清空Cookie
						this.clearCookie();
					}
					//获取用户tokenValue
					this.tokenValue = data.data.tokenValue
					// 获取网点ID
					this.latticeid = data.data.latticeid
					// 获取机构ID
					this.organid = data.data.organid
					// 获取用户ID
					this.personId = data.data.personId
					console.log(' token' + this.tokenValue, ' 网点ID' + this.latticeid, ' 机构ID' + this.organid)
					//添加token
					window.sessionStorage.setItem('usertoken', data.data.tokenValue)
					window.sessionStorage.setItem('latticeid', data.data.latticeid)
					window.sessionStorage.setItem('organid', data.data.organid)
					window.sessionStorage.setItem('personId', data.data.personId)
					$ajax.defaults.headers.common["userkey"] = data.data.tokenValue
					$ajax.defaults.headers.common["latticeId"] = data.data.latticeid
					$ajax.defaults.headers.common["organId"] = data.data.organid

					//是否是新用户
					if (data.data.ismail) {
						//判断权限
						if (data.data.rolecode) {
							console.log(data.data.rolecode)
							if (data.data.rolecode === '1') {
								window.sessionStorage.setItem('adminStatus', 'admin1')
								/*动态添加路由*/
								var $index = 0
								this.$router.options.routes.some((v, i) => {
									if (v.path == '/index') {
										$index = i;
										return true
									}
								})
								this.$router.options.routes[$index].children = this.$router.getAdmin()
								this.$router.addRoutes(this.$router.options.routes)
								this.$router.push('/mechanismindex')

							} else {
								window.sessionStorage.setItem('adminStatus', 'admin2')
								/*动态添加路由*/
								var $index = 0
								this.$router.options.routes.some((v, i) => {
									if (v.path == '/index') {
										$index = i;
										return true
									}
								})
								this.$router.options.routes[$index].children = this.$router.getAdmin()
								this.$router.addRoutes(this.$router.options.routes)

								this.$router.push({
									path: '/slideindex',
									// query: {
									// 	isFirst: this.isFirst
									// }
								})
							}
						}
					} else {
						//新用户
						this.$router.push('/emailBbinding')
					}
				} else {
					this.errorMsg = true
					this.errorMsgInfo = data.msg
					// this.$message.error(data.msg)
				}
			})
		}
	} // 函数
}
</script>
<style lang='scss'>
	.login_moudel {
		min-width: 1200px;
		position: relative;
		box-sizing: border-box;
		background: url(../assets/img/login-bg.jpg) 0 0 no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		padding: 45px 0 0 56px;

		.login {
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: #ccc 1px 1px 10px;
			position: absolute;
			right: 12%;
			top: 25%;
			width: 369px;
			height: 404px;
			padding: 48px 32px 48px 32px;

			.el-input {
				width: 100%;
			}

			.from {

				.titleText {
					color: #333437;
					font-size: 18px;
					line-height: 22px;

					.img1 {
						animation: imgopticy 2s infinite;
					}

					.img2 {
						animation: imgopticy 4s infinite;
					}

					.img3 {
						animation: imgopticy 6s infinite;
					}

					@keyframes imgopticy {
						0% {
							opacity: 1;
						}

						100% {
							opacity: 0.1;
						}
					}
				}

				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.name {
					input {
						margin-top: 40px;
						margin-bottom: 30px;
						padding-left: 38px;
						background: url(../assets/img/user_icon.png) 15px center no-repeat;
					}
				}

				.pass {
					input {
						padding-left: 38px;
						margin-bottom: 24px;
						background: url(../assets/img/password_icon.png) 15px center no-repeat;
					}
				}

				.login-group {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 14px;
					margin-bottom: 60px;
				}
				.tips{
					width: 100%; 
					text-align: left;
					font-size: 12px;
					color: red;
					padding: 0 6px;
					margin: -16px 0 10px;
				}
			}
		}
	}
</style>
